import React, { useState, useEffect } from 'react'
import { Form, Input, Button } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import './Inlineform.less'
function useInlineForm(props) {
  const [form] = Form.useForm()
  const [, forceUpdate] = useState() // To disable submit button at the beginning.

  useEffect(() => {
    forceUpdate({})
  }, [])

  const onFinish = (values) => {
    console.log('Finish:', values)
  }
  const onReset = () => {
    form.resetFields()
  }
  const onFill = () => {
    form.setFieldsValue({
      username: '23232@qq.com',
      password: '123456',
    })
  }
  return (
    <Form
      form={form}
      name="horizontal_login"
      layout="inline"
      onFinish={onFinish}
    >
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: '用户名必须填写!',
          },
          {
            pattern: new RegExp(
              '^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6}$',
              'g'
            ),
            message: '用户名必须是邮箱',
          },
        ]}
      >
        <Input
          prefix={<UserOutlined className="site-form-item-icon" />}
          placeholder="用户名"
        />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '密码必须填写',
          },
          {
            pattern: new RegExp('^.{6,}$', 'g'),
            message: '密码必须超过6位',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="密码"
        />
      </Form.Item>
      <Form.Item shouldUpdate>
        {() => (
          <Button
            type="primary"
            htmlType="submit"
            className="submitbutton"
            disabled={
              !form.isFieldsTouched(true) ||
              form.getFieldsError().filter(({ errors }) => errors.length).length
            }
          >
            登陆
          </Button>
        )}
      </Form.Item>
      <Form.Item>
        <Button
          type="primary"
          onClick={onReset}
          style={{ height: '56px', width: '120px' }}
        >
          重置
        </Button>
      </Form.Item>
      <Form.Item>
        <Button
          type="primary"
          onClick={onFill}
          style={{ height: '56px', width: '120px' }}
        >
          填充
        </Button>
      </Form.Item>
    </Form>
  )
}

export default useInlineForm
